<template>
  <div class="father">
    <div class="head">
      <img :src="userList?.avatar" alt="">
      <div
        style="width: 100px;height: 50px;display: inline-block;vertical-align: top;margin-top: 25px;">
        <span>{{ userList?.account }}</span>
        <comIcon @click="router.push(`/editName/${userList?.account}`) " style="font-size: 18px;display: block;" name="icons-home-编辑" />
      </div>

    </div>
    <div class="nav">
      <div @click="router.push('/myCollection')">
        {{userList?.collectionNumber}}收藏
      </div>
      <div>{{userList?.likeNumber}}关注</div>
      <div>{{userList?.score}}积分</div>
      <div>{{userList?.couponNumber}}优惠券</div>
    </div>
    <div class="center">
      药品订单 <span class="dd">全部订单<van-icon name="arrow" /></span>
      <div class="banner">
        <div>
          <comIcon style="font-size: 24px;" name="icons-user-paid" />
          <span>待支付</span>
        </div>
        <div>
          <comIcon style="font-size: 24px;" name="icons-user-shipped" />
          <span>待发货</span>
        </div>
        <div>
          <comIcon style="font-size: 24px;" name="icons-user-received" />
          <span>待收货</span>
        </div>
        <div>
          <comIcon style="font-size: 24px;" name="icons-user-finished" />
          <span>已完成</span>
        </div>
      </div>
    </div>
    <div class="tool">
      快捷工具
      <div class="toolList" >
        <comIcon style="font-size: 24px;vertical-align: middle;" name="icons-user-tool-01" />
        <span style="margin-left: 10px;">我的问诊</span>
        <van-icon style="float: right;margin-top: 20px;" name="arrow" />
      </div>
      <div class="toolList" @click="router.push('/prescriptionList')">
        <comIcon style="font-size: 24px;vertical-align: middle;" name="icons-user-tool-02" />
        <span style="margin-left: 10px;">我的处方</span>
        <van-icon style="float: right;margin-top: 20px;" name="arrow" />
      </div>
      <div class="toolList"  @click="router.push('/choosePatient')">
        <comIcon style="font-size: 24px;vertical-align: middle;" name="icons-user-tool-03" />
        <span style="margin-left: 10px;">家庭档案</span>
        <van-icon style="float: right;margin-top: 20px;" name="arrow" />
      </div>
      <div class="toolList"   @click="router.push('/addressManage')">
        <comIcon style="font-size: 24px;vertical-align: middle;" name="icons-user-tool-04" />
        <span style="margin-left: 10px;">地址管理</span>
        <van-icon style="float: right;margin-top: 20px;" name="arrow" />
      </div>
      <div class="toolList">
        <comIcon style="font-size: 24px;vertical-align: middle;" name="icons-user-tool-05" />
        <span style="margin-left: 10px;">我的评价</span>
        <van-icon style="float: right;margin-top: 20px;" name="arrow" />
      </div>
      <div class="toolList">
        <comIcon style="font-size: 24px;vertical-align: middle;" name="icons-user-tool-07" />
        <span style="margin-left: 10px;">设置</span>
        <van-icon style="float: right;margin-top: 20px;" name="arrow" />
      </div>

    </div>
  </div>
  <tab />
</template>

<script setup lang="ts">
// tab组件 icons/user/paid.svg
import tab from '@/components/common/com-tabbar/com-tabbar.vue'
// icon组件
import comIcon from '@/components/common/com-icon/com-icon.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router =useRouter()


// 用户信息
import { getPatientMyUserAPI } from '@/api/my'

import type { Me } from "@/types/my";
const userList = ref<Me>()
onMounted(async () => {
  const res = await getPatientMyUserAPI()
  userList.value = res.data.data
  console.log(userList.value);

})
</script>

<style lang="scss" scoped>
.father {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow: auto;
  background-color: #f6f7f9;
}

.head {
  width: 100%;
  height: 110px;
  background: linear-gradient(#9edad4, #dfefef);
  vertical-align: middle;

  img {
    width: 80px;
    height: 80px;
    background-color: pink;
    border-radius: 50%;
    margin: 15px;
    display: inline-block;
  }
}

.nav {
  display: flex;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(#dfefef, #f6f7f9);

  div {
    flex: 1;
    text-align: center;
    color: #a8a4a2;
  }
}

.center {
  width: 80%;
  height: 90px;
  margin: 5%;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 5%;

  .dd {
    float: right;
    color: #d2d2d4;
    font-size: 12px;
  }

  .banner {
    width: 100%;
    height: 60px;
    margin-top: 15px;
    display: flex;

    div {
      flex: 1;
      text-align: center;

      span {
        display: block;
        font-size: 12px;
        margin-top: 5px;
      }
    }

  }
}

.tool {
  width: 80%;
  margin: 5%;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 5%;
  margin-bottom: 105px;

  .toolList {
    height: 50px;
    line-height: 50px;
    margin: 10px 0;
  }
}
</style>
